.hid {
	display: block;
	height: 100%;
	overflow: hidden;
}
.page-detail {
	.crumbs-shop {
		width: 100%;
		background: #f7f7f7;
		.content {
			display: flex;
		}
		.crumbs {
			flex: 1;
			padding: 16px 0 14px;
		}
		.shop-box {
			display: flex;
			height: 16px;
			line-height: 16px;
			padding: 16px 0 14px;
			.shop {
				display: block;
				height: 16px;
				line-height: 16px;
				.self {
					background: #e1251b;
					color: #fff;
					padding: 1px 3px;
					display: inline-block;
					height: 14px;
					line-height: 14px;
					border-radius: 2px;
					margin-right: 5px;
					vertical-align: top;
				}
				.shop-icon {
					width: 14px;
					height: 14px;
					vertical-align: top;
					display: inline-block;
					margin-top: 1px;
					margin-right: 2px;
					background: url(@/assets/images/icons.png) no-repeat -28px -458px;
					font-size: 0;
				}
				&:hover {
					.shop-icon {
						background-position: -9px -458px;
					}
					color: #e1251b;
				}
			}
			.favourite {
				display: inline-block;
				cursor: pointer;
				margin: 0 15px;
				&:hover {
					color: #e1251b;
					.favourite-icon {
						background-position: -21px -135px;
					}
				}
				.favourite-icon {
					vertical-align: top;
					display: inline-block;
					width: 16px;
					height: 16px;
					background: url(@/assets/images/icons.png) no-repeat 0 -135px;
					margin-right: 5px;
				}
			}
			.favourite.active {
				.favourite-icon {
					background-position: -21px -135px;
				}
			}
		}
	}
	.detail-up {
		display: flex;
		margin-top: 20px;
		.img {
			width: 450px;
			margin-right: 40px;
			.big-img {
				width: 100%;
				height: 450px;
				text-align: center;
				line-height: 430px;
				font-size: 0;
				position: relative;
				.el-image {
					display: inline;
				}
				img {
					max-width: 100%;
					max-height: 100%;
					vertical-align: middle;
          object-fit: cover;
				}
			}
			.oper-btn {
				position: absolute;
				display: flex;
				justify-content: center;
				cursor: pointer;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.09);
				width: 50px;
				height: 50px;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				opacity: 0.6;
				&:hover {
					opacity: 1;
				}
				img {
					width: 100%;
					height: 100%;
				}
			}
			.small-img {
				position: relative;
				.left-arrow {
					position: absolute;
					top: 0;
					display: block;
					width: 35px;
					height: 68px;
					line-height: 64px;
					font-size: 40px;
					color: #ccc;
					font-family: Consolas,sans-serif;
					cursor: pointer;
					-moz-transition: all 0.2s;
					-webkit-transition: all 0.2s;
					-o-transition: all 0.2s;
					transition: all 0.2s;
					left: 0;
					text-align: left;
					&:hover {
						color: #999;
					}
				}
				.right-arrow {
					position: absolute;
					top: 0;
					display: block;
					width: 35px;
					height: 68px;
					line-height: 64px;
					font-size: 40px;
					color: #ccc;
					font-family: Consolas,sans-serif;
					cursor: pointer;
					-moz-transition: all 0.2s;
					-webkit-transition: all 0.2s;
					-o-transition: all 0.2s;
					transition: all 0.2s;
					right: 0;
					text-align: right;
					&:hover {
						color: #999;
					}
				}
				.limit {
					color: #eee;
					&:hover {
						color: #eee;
					}
				}
				.img-box {
					margin: 15px 35px 0;
					width: 380px;
					height: 68px;
					overflow: hidden;
					position: relative;
					.offset-box {
						position: absolute;
						left: 0;
						-webkit-transition: all 0.3s;
						-moz-transition: all 0.3s;
						transition: all 0.3s;
					}
					.item {
						display: inline-block;
						width: 64px;
						height: 64px;
						font-size: 0;
						line-height: 64px;
						text-align: center;
						border: 2px solid #fff;
						margin-left: 10px;
						&:first-child {
							margin-left: 0;
						}
						&:hover {
							border: 2px solid #e1251b;
						}
						img {
							max-width: 100%;
							max-height: 100%;
							vertical-align: middle;
						}
					}
					.item.active {
						border: 2px solid #e1251b;
					}
				}
			}
		}
		.info {
			flex: 1;
			.name-box {
				margin-bottom: 15px;
				margin-top: 5px;
				.name {
					width: 710px;
					font-size: 24px;
					line-height: 28px;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					position: relative;
					word-wrap: break-word;
					word-break: break-all;
				}
				.des {
					margin-top: 7px;
					color: #999;
					line-height: 18px;
					font-size: 12px;
					padding-right: 15px;
					.brief {
						max-width: 550px;
						line-clamp: 2;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
					}
					.discount-info {
						color: #999;
						margin-top: 5px;
						max-width: 550px;
						line-clamp: 2;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						.go-discount {
							color: #005ea7;
							&:hover {
								text-decoration: underline;
							}
							.arr {
								font-family: Consolas,sans-serif;
							}
						}
					}
				}
			}
			.activity {
				height: 40px;
				line-height: 38px;
				display: flex;
				padding: 0 15px 0 0;
				color: #fff;
				background: -webkit-linear-gradient(left, #f53e00, #e1251b);
				background: -o-linear-gradient(right, #f53e00, #e1251b);
				background: -moz-linear-gradient(right, #f53e00, #e1251b);
				background: linear-gradient(to right, #f53e00, #e1251b);
				position: relative;
				border-bottom: 1px solid #eb6060;
				.name {
					flex: 1;
					font-size: 16px;
					padding-left: 50px;
					position: relative;
					margin-right: 20px;
					word-break: break-word;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					&::before {
						position: absolute;
						left: 0;
						top: 0;
						display: block;
						width: 40px;
						height: 40px;
						content: ' ';
						background: url(@/assets/images/icons.png) no-repeat;
					}
				}
				.name.flash-sale {
					&::before {
						background-position: -65px -182px;
					}
				}
				.name.group-buy {
					&::before {
						background-position: -10px -182px;
					}
				}
				.limit {
					.time {
						font-family: arial,sans-serif;
					}
				}
			}
			.price-box {
				background: #f9f9f9;
				border-top: 1px dotted #eee;
				border-bottom: 1px dotted #eee;
				padding: 0 0 13px;
				line-height: 24px;
				margin-top: -1px;
				margin-bottom: 20px;
				.item {
					display: flex;
					margin-top: 15px;
					.tit {
						margin: 0 15px;
						color: #999;
					}
					.con {
						flex: 1;
					}
					.con.pre-sale-red {
						color: #e43130;
					}
				}
				.discount {
					align-items: baseline;
				}
				.item.goods-price {
					height: 30px;
					line-height: 35px;
					.con {
						display: flex;
						.price {
							font-size: 18px;
							height: 30px;
							line-height: 30px;
							display: flex;
							align-items: baseline;
							.big {
								font-size: 26px;
							}
						}
						.old-price {
							font-family: arial,sans-serif;
							color: #999;
							text-decoration: line-through;
							margin-left: 10px;
						}
					}
				}
				.item.coupons {
					.con {
						display: flex;
						flex-wrap: wrap;
						.conpon {
							display: inline-block;
							margin-right: 12px;
							position: relative;
							height: 16px;
							line-height: 16px;
							text-align: center;
							border-top: 1px solid #e1251b;
							border-bottom: 1px solid #e1251b;
							padding: 0 10px 0 12px;
							background: #ffdedf;
							cursor: pointer;
							color: #e1251b;
							font-family: arial,sans-serif;
							-moz-transition: all 0.2s;
							-webkit-transition: all 0.2s;
							-o-transition: all 0.2s;
							transition: all 0.2s;
							&:hover {
								background: #fff;
							}
							&::before {
								position: absolute;
								top: -1px;
								display: block;
								height: 18px;
								width: 2px;
								content: ' ';
								background: url(@/assets/images/icons.png) no-repeat 0 -453px;
								left: 0;
								background-position: -2px -453px;
							}
							&::after {
								position: absolute;
								top: -1px;
								display: block;
								height: 18px;
								width: 2px;
								content: ' ';
								background: url(@/assets/images/icons.png) no-repeat 0 -453px;
								right: -2px;
							}
						}
						.more {
							color: #999;
							&:hover {
								color: #e1251b;
							}
						}
						.arrow {
							font-family: Consolas,sans-serif;
						}
					}
				}
				.item.discount {
					.con {
						.discount-item {
							display: flex;
							margin-bottom: 5px;
							align-items: center;
							flex-wrap: wrap;
							line-height: 24px;
							.type {
								margin-right: 5px;
								padding: 1px 3px;
								border: 1px solid #e1251b;
								color: #e1251b;
								line-height: 14px;
								height: 14px;
							}
							.packge-item {
								display: flex;
								align-items: center;
								margin-left: 10px;
								margin-right: 10px;
								img {
									width: 29px;
									height: 29px;
									margin-right: 5px;
									border: 1px solid #f2f2f2;
								}
								.count {
									font-size: 12px;
									display: flex;
									align-items: center;
									color: #999999;
								}
							}
							.text {
								margin: 0 10px 0 5px;
								max-width: 500px;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								word-break: keep-all;
							}
							.det {
								color: #999;
								.arr {
									font-family: Consolas,sans-serif;
								}
								&:hover {
									color: #e1251b;
								}
							}
						}
						.discount-item.item-box {
							display: inline-block;
							.text {
								display: none;
							}
							.det {
								display: none;
							}
						}
						&:hover {
							.discount-item.item-box {
								display: flex;
								.text {
									display: block;
								}
								.det {
									display: block;
								}
							}
						}
					}
				}
			}
			.sku-box {
				.items {
					display: flex;
					margin-top: 10px;
					.tit {
						margin: 0 15px;
						color: #999;
						display: block;
						line-height: 30px;
						word-break: break-all;
						width: 5em;
					}
					.con {
						flex: 1;
						display: flex;
						flex-wrap: wrap;
						.item {
							display: inline-block;
							border: 1px solid #ddd;
							position: relative;
							margin-right: 10px;
							margin-bottom: 10px;
							vertical-align: middle;
							-moz-transition: all 0.2s;
							-webkit-transition: all 0.2s;
							-o-transition: all 0.2s;
							transition: all 0.2s;
							cursor: pointer;
							&:hover {
								border: 1px solid #e1251b;
								color: #e1251b;
							}
						}
						.item.not-optional {
							border: 1px dashed #bbb;
							color: #bbb;
						}
						.item.active {
							border: 1px solid #e1251b;
							color: #e1251b;
						}
						.goods-number {
							height: 30px;
							.reduce {
								display: inline-block;
								vertical-align: top;
								width: 30px;
								height: 30px;
								background: #e9e9e9;
								font-size: 22px;
								text-align: center;
								line-height: 26px;
								color: #999;
								cursor: pointer;
							}
							.increase {
								display: inline-block;
								vertical-align: top;
								width: 30px;
								height: 30px;
								background: #e9e9e9;
								font-size: 22px;
								text-align: center;
								line-height: 26px;
								color: #999;
								cursor: pointer;
							}
							.limit {
								cursor: not-allowed;
								color: #ccc;
							}
							.number {
								border: 0;
								width: 60px;
								height: 30px;
								text-align: center;
								font-family: arial,sans-serif;
								vertical-align: top;
							}
						}
            .purchase-limit {
              margin-left: 20px;
              display: flex;
              align-items: center;
              > span {
                color: #e1251b;
              }
            }
					}
				}
				.items.sku-img {
					.tit {
						line-height: 52px;
					}
					.con {
						.item {
							width: 50px;
							height: 50px;
							font-size: 0;
							line-height: 50px;
							img {
								width: 100%;
								height: 100%;
								vertical-align: middle;
							}
						}
					}
				}
				.items.sku-text {
					.con {
						.item {
							padding: 0 16px;
							line-height: 28px;
							height: 28px;
						}
					}
				}
			}
			.btns {
				margin-top: 30px;
				padding-left: 15px;
				display: flex;
				.buy-now {
					padding: 0 50px;
					font-size: 16px;
					border-radius: 2px;
					background: #e1251b;
					color: #fff;
					height: 48px;
					line-height: 48px;
					&:hover {
						opacity: 0.9;
					}
				}
				.add-cart {
					height: 46px;
					line-height: 46px;
					padding: 0 50px;
					font-size: 16px;
					border-radius: 2px;
					margin-left: 10px;
					background: #ffdedf;
					border: 1px solid #e1251b;
					color: #e1251b;
					&:hover {
						background: #fff;
					}
				}
				.collect {
					height: 46px;
					line-height: 46px;
					font-size: 16px;
					border-radius: 2px;
					border: 1px solid #ddd;
					padding: 0 30px;
					margin-left: 10px;
					.icon {
						display: inline-block;
						width: 16px;
						height: 16px;
						vertical-align: top;
						margin-right: 10px;
						margin-top: 16px;
						background: url(@/assets/images/icons.png) no-repeat 0 -156px;
					}
				}
				.collected {
					height: 46px;
					line-height: 46px;
					font-size: 16px;
					border-radius: 2px;
					border: 1px solid #ddd;
					padding: 0 30px;
					margin-left: 10px;
					.icon {
						display: inline-block;
						width: 16px;
						height: 16px;
						vertical-align: top;
						margin-right: 10px;
						margin-top: 16px;
						background: url(@/assets/images/icons.png) no-repeat -21px -156px;
					}
				}
				.shortage {
					padding: 0 50px;
					font-size: 16px;
					border-radius: 2px;
					height: 48px;
					line-height: 48px;
					background: #f7f7f7;
					color: #999;
					cursor: not-allowed;
				}
				.add-cart-group {
					padding: 0 22px;
				}
				.collect.active {
					.icon {
						background-position: -21px -156px;
					}
				}
			}
			.group-btn {
				.build-group {
					display: block;
					position: relative;
					height: 48px;
					padding: 0 20px;
					color: #fff;
					text-align: center;
					font-size: 14px;
					font-weight: 600;
					border-radius: 2px;
					min-width: 90px;
					background: #e1251b;
					.group-text {
						display: block;
						line-height: 14px;
						margin-top: 3px;
					}
					.group-code {
						display: none;
						position: absolute;
						left: 0;
						top: 58px;
						width: 130px;
						box-sizing: border-box;
						border: 1px solid #eee;
						background: #fff;
						box-shadow: 0 0 3px rgba(0, 0, 0, 0.07);
						&::before {
							position: absolute;
							left: 20px;
							display: block;
							width: 0;
							height: 0;
							border: 5px solid transparent;
							content: ' ';
							top: -11px;
							border-bottom: 5px solid #e4e4e4;
						}
						&::after {
							position: absolute;
							left: 20px;
							display: block;
							width: 0;
							height: 0;
							border: 5px solid transparent;
							content: ' ';
							top: -10px;
							border-bottom: 5px solid #f5f5f5;
						}
						.text {
							display: block;
							width: 100%;
							height: 30px;
							line-height: 30px;
							padding-left: 10px;
							box-sizing: border-box;
							background: #f5f5f5;
							font-size: 13px;
							font-family: arial,sans-serif;
							font-weight: 400;
							text-align: left;
							color: #666;
						}
						.code-img {
							display: block;
							margin: 10px auto;
							width: 110px !important;
							height: 110px !important;
							font-size: 0;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.display-none {
							display: none !important;
						}
					}
					&:hover {
						.group-code {
							display: block;
						}
					}
				}
				.alone-group {
					display: block;
					position: relative;
					height: 48px;
					padding: 0 20px;
					color: #fff;
					text-align: center;
					font-size: 14px;
					font-weight: 600;
					border-radius: 2px;
					min-width: 90px;
					background: #85c360;
					margin-left: 10px;
					&:hover {
						opacity: 0.9;
					}
				}
				.group-text {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
				}
				.en {
					padding: 0 10px;
				}
				.alone-group.cannotbuy {
					background: #bbb;
				}
				.group-price {
					display: block;
					line-height: 14px;
					margin-top: 9px;
				}
			}
			.collect {
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}
			.add-cart-group {
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}
		}
	}
	.detail-down {
		display: flex;
		margin-top: 30px;
		.introduce-box {
			flex: 1;
			margin-right: 20px;
			max-width: 938px;
			.tab {
				display: flex;
				flex-wrap: wrap;
				background: #f9f9f9;
				border: 1px solid #eee;
				border-bottom-color: #e1251b;
				.item {
					height: 40px;
					line-height: 40px;
					padding: 0 30px;
					font-size: 14px;
					-moz-transition: all 0.2s;
					-webkit-transition: all 0.2s;
					-o-transition: all 0.2s;
					transition: all 0.2s;
					cursor: pointer;
					margin-left: -1px;
					margin-top: -1px;
					&:hover {
						color: #e1251b;
					}
					.number {
						color: #e1251b;
						font-family: arial,sans-serif;
					}
				}
				.item.active {
					background: #e1251b;
					color: #fff;
					.number {
						color: #fff;
					}
				}
			}
			.introduce {
				margin-top: 30px;
				img {
					display: block;
					margin: auto;
					max-width: 100%;
				}
			}
			.comment {
				margin-top: 30px;
				.good-rates {
					display: flex;
					padding: 20px 0;
					.score {
						border-right: 1px solid #eee;
						text-align: center;
						display: flex;
						padding: 0 60px;
						align-items: center;
						.tit {
							margin-right: 20px;
							font-size: 14px;
						}
						.con {
							font-size: 45px;
							color: #e1251b;
							font-family: arial,sans-serif;
						}
					}
					.average {
						margin-left: 50px;
						.item {
							display: flex;
							height: 14px;
							line-height: 14px;
							margin-top: 10px;
							&:first-child {
								margin-top: 0;
							}
							.number {
								font-family: arial,sans-serif;
								display: inline-block;
								vertical-align: top;
							}
							.text {
								font-family: arial,sans-serif;
								display: inline-block;
								vertical-align: top;
							}
							.stars {
								margin: 0 10px;
								.star {
									display: inline-block;
									vertical-align: top;
									width: 14px;
									height: 14px;
									background: url(@/assets/images/icons.png) no-repeat;
									background-position: -42px -138px;
								}
								.star-gray {
									display: inline-block;
									vertical-align: top;
									width: 14px;
									height: 14px;
									background: url(@/assets/images/icons.png) no-repeat;
									background-position: -61px -138px;
								}
							}
						}
					}
				}
				.comment-tab {
					display: flex;
					background: #f9f9f9;
					padding: 10px;
					border: 1px solid #eee;
					margin-top: 20px;
					.item {
						padding: 0 10px;
						cursor: pointer;
						-moz-transition: all 0.2s;
						-webkit-transition: all 0.2s;
						-o-transition: all 0.2s;
						transition: all 0.2s;
						&:hover {
							color: #e1251b;
						}
						.number {
							font-family: arial,sans-serif;
						}
					}
					.item.active {
						color: #e1251b;
					}
				}
				.comment-con {
					margin-top: 15px;
					.item {
						padding: 15px;
						display: flex;
						border-bottom: 1px solid #eee;
						.buyer-msg {
							width: 80px;
							text-align: center;
							.img {
								width: 50px;
								height: 50px;
								border-radius: 50%;
								overflow: hidden;
								margin: auto;
								img {
									width: 100%;
									height: 100%;
									display: block;
								}
							}
							.name {
								margin: 7px auto 0;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
						}
						.buyer-comment {
							margin-left: 10px;
							line-height: 20px;
							flex: 1;
							.stars {
								.star {
									display: inline-block;
									vertical-align: top;
									width: 14px;
									height: 14px;
									background: url(@/assets/images/icons.png) no-repeat;
									background-position: -42px -138px;
									margin-right: 3px;
								}
								.star-gray {
									display: inline-block;
									vertical-align: top;
									width: 14px;
									height: 14px;
									background: url(@/assets/images/icons.png) no-repeat;
									background-position: -61px -138px;
									margin-right: 3px;
								}
								padding-top: 2px;
								height: 14px;
							}
							.text {
								margin-top: 5px;
							}
							.img-box {
								.img {
									display: inline-block;
									text-align: center;
									width: 60px;
									height: 60px;
									line-height: 60px;
									font-size: 0;
									border: 1px solid #fff;
									margin: 10px 10px 0 0;
									&:hover {
										border-color: #e1251b;
									}
									img {
										display: inline-block;
										text-align: center;
										max-width: 100%;
										max-height: 100%;
										vertical-align: middle;
										-moz-transition: all 0.2s;
										-webkit-transition: all 0.2s;
										-o-transition: all 0.2s;
										transition: all 0.2s;
										cursor: pointer;
									}
								}
							}
							.time-sku {
								margin-top: 10px;
								color: #999;
								.time {
									font-family: arial,sans-serif;
								}
								.sku {
									margin-left: 20px;
								}
							}
							.append-comment {
								margin-top: 10px;
								padding-top: 10px;
								border-top: 1px solid #eee;
								.append-time {
									color: #999;
								}
								.append-con {
									margin-top: 5px;
									padding-bottom: 3px;
								}
							}
							.seller-reply {
								margin-top: 10px;
								padding-top: 10px;
								border-top: 1px solid #eee;
								.tit {
									color: #e1251b;
								}
								.con {
									margin-top: 5px;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									position: relative;
									line-height: 1.5;
									word-wrap: break-word;
									word-break: break-word;
								}
								.time {
									margin-top: 10px;
									color: #999;
									font-family: arial,sans-serif;
								}
							}
						}
					}
					.comment-empty {
						text-align: center;
						color: #999;
						padding: 80px 0;
						border-bottom: 1px solid #eee;
					}
				}
				.pages {
					margin-top: 20px;
				}
			}
		}
		.introduce-box.packages {
			margin-right: 0;
			max-width: 1200px;
			.packages-content {
				margin-top: 20px;
				display: flex;
				.add-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 34px;
					height: 34px;
					margin: 43px 40px 0;
					&::before {
						content: '';
						position: absolute;
						width: 26px;
						border-top: 4px solid #ddd;
					}
					&::after {
						content: '';
						position: absolute;
						height: 26px;
						border-left: 4px solid #ddd;
					}
				}
				.mean-icon {
					display: inline-block;
					width: 34px;
					height: 34px;
					margin: 53px 40px 0 0;
					&::before {
						content: '';
						position: absolute;
						width: 26px;
						border-top: 4px solid #ddd;
					}
					&::after {
						content: '';
						position: absolute;
						margin-top: 10px;
						width: 26px;
						border-bottom: 4px solid #ddd;
					}
				}
				.left {
					width: 938px;
					margin-right: 20px;
					display: flex;
					.prod-box {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 120px;
						height: 200px;
						.img {
							width: 120px;
							height: 120px;
							box-sizing: border-box;
							border: 1px solid #f2f2f2;
						}
						.prod-name {
							margin-top: 10px;
							font-size: 14px;
							font-weight: 400;
							line-height: 19px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							color: #333333;
						}
						.checkbox {
							margin-right: 4px;
						}
						.price {
							margin-top: 10px;
							font-size: 14px;
							font-weight: 400;
							color: #E1251B;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.price-count-con {
								display: flex;
								align-items: center;
								flex: 1;
								>span {
									flex: 1;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									-webkit-box-orient: vertical;
									word-break: break-all;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}
							.combo-count {
								margin-left: auto;
								width: 40px;
								color: #999;
								text-align: right;
							}
						}
					}
					.prod-box.necessary {
						margin-right: 70px;
						&:last-child {
							margin-right: 0;
						}
					}
				}
				.right {
					width: 240px;
					display: flex;
					.item {
						margin-top: 12px;
					}
					.settlement-box {
						width: 140px;
						.text {
							font-size: 14px;
							font-weight: 400;
							line-height: 19px;
							color: #666666;
						}
						.price-text {
							font-size: 16px;
							font-weight: bold;
							line-height: 21px;
							color: #E1251B;
						}
						.btn {
							width: 104px;
							height: 33px;
							background: #E1251B;
							font-size: 14px;
							font-weight: 400;
							line-height: 19px;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
							cursor: pointer;
						}
						.btn-add-cart {
							width: 104px;
							height: 33px;
							background: #FFECEC;
							border: 1px solid #E1251B;
							font-size: 14px;
							font-weight: 400;
							line-height: 19px;
							color: #E1251B;
							display: flex;
							justify-content: center;
							align-items: center;
							cursor: pointer;
							box-sizing: border-box;
						}
					}
				}
			}
		}
		.side {
			width: 242px;
			.shop-search {
				border: 1px solid #eee;
				.tit {
					background: #f9f9f9;
					padding: 10px;
					font-size: 14px;
					border-bottom: 1px solid #eee;
				}
				.con {
					padding: 15px;
					display: flex;
				}
				.text {
					height: 26px;
					line-height: 26px;
					vertical-align: top;
					border: 1px solid #ddd;
					background: #fff;
					border-right: none;
					font-size: 12px;
					padding: 0 10px;
					flex: 1;
				}
				.btn {
					width: 30px;
					height: 28px;
					position: relative;
					background: #e1251b;
					&::before {
						position: absolute;
						left: 8px;
						top: 6px;
						display: block;
						width: 14px;
						height: 14px;
						content: ' ';
						font-size: 0;
						background: url(@/assets/images/icons.png) no-repeat;
						background-position: 0 -58px;
					}
					&:hover {
						opacity: 0.8;
					}
				}
			}
			.shop-category {
				.tit {
					background: #f9f9f9;
					padding: 10px;
					font-size: 14px;
					border-bottom: 1px solid #eee;
				}
				margin-top: 20px;
				border: 1px solid #eee;
				.con {
					padding: 10px 15px;
					line-height: 30px;
					.items {
						.item-main {
							position: relative;
							padding-left: 15px;
							cursor: pointer;
							height: 30px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							-moz-transition: all 0.2s;
							-webkit-transition: all 0.2s;
							-o-transition: all 0.2s;
							transition: all 0.2s;
							.arrow {
								position: absolute;
								left: 0;
								top: 12px;
								width: 0;
								height: 0;
								border: 4px solid transparent;
								border-left: 5px solid #333;
								border-radius: 2px;
							}
							&:hover {
								text-decoration: underline;
							}
						}
						.item-con {
							display: none;
							.item {
								padding-left: 15px;
								color: #999;
								height: 30px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								cursor: pointer;
								-moz-transition: all 0.2s;
								-webkit-transition: all 0.2s;
								-o-transition: all 0.2s;
								transition: all 0.2s;
								&:hover {
									color: #e1251b;
								}
							}
						}
					}
					.items.active {
						.item-main {
							.arrow {
								border-left: 4px solid transparent;
								border-top: 4px solid #333;
								top: 15px;
							}
							text-decoration: underline;
						}
						.item-con {
							display: block;
						}
					}
				}
			}
			.sale-well {
				.tit {
					background: #f9f9f9;
					padding: 10px;
					font-size: 14px;
					border-bottom: 1px solid #eee;
				}
				margin-top: 20px;
				border: 1px solid #eee;
				.con {
					padding: 15px;
					.item {
						position: relative;
						margin: 15px auto 0;
						cursor: pointer;
						-moz-transition: all 0.2s;
						-webkit-transition: all 0.2s;
						-o-transition: all 0.2s;
						transition: all 0.2s;
						&:hover {
							opacity: 0.8;
						}
						&:first-child {
							margin-top: 0;
						}
						.goods-img {
							width: 210px;
							height: 210px;
							line-height: 210px;
							text-align: center;
							font-size: 0;
							img {
								max-width: 100%;
								max-height: 100%;
								vertical-align: middle;
							}
						}
						.goods-msg {
							text-align: center;
							padding-top: 10px;
							padding-bottom: 5px;
							.goods-name {
								height: 14px;
								line-height: 14px;
								font-size: 14px;
								max-width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.goods-price {
								display: flex;
								justify-content: center;
								height: 16px;
								line-height: 16px;
								margin: 10px 0;
								overflow: hidden;
								.old-price {
									margin-left: 10px;
									color: #999;
									font-family: arial,sans-serif;
									text-decoration: line-through;
									height: 12px;
									line-height: 12px;
									margin-top: 4px;
								}
							}
						}
					}
				}
			}
		}
	}
  .prod-video {
    background-color: #000;
  }
  .close-btn {
    position: absolute;
    display: flex;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: 20px;
    right: 10px;
    transform: translateX(-50%);
  }
  .introduce-box {
    .comment {
      .comment-con {
        .buyer-comment {
          .big-img-show {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-color: #333;
            overflow: hidden;
            .left-arrow {
              width: 100px;
              height: 100px;
              font-size: 80px;
              color: #d8d3d3;
              position: absolute;
              top: 40%;
              left: 10%;
              z-index: 1002;
              cursor: pointer;
            }
            .right-arrow {
              width: 100px;
              height: 100px;
              font-size: 80px;
              color: #d8d3d3;
              position: absolute;
              top: 40%;
              right: 10%;
              z-index: 1002;
              cursor: pointer;
            }
            .mask {
              position: relative;
              top: 0;
              left: 0;
              width: calc(100% + 17px);
              height: 100%;
              background: rgba(0, 0, 0);
              opacity: 0.9;
            }
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: auto;
              max-height: 100%;
              z-index: 1001;
            }
          }
        }
      }
    }
  }
  .introduce {
    div {
      p {
        video {
          width: 938px;
        }
      }
    }
    .params-box {
      width: 280px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 40px;
      &:nth-child(3n) {
        margin-right: 0;
      }
      .key {
        color: #999999;
        float: left;
        margin-left: 10px;
      }
      .value {
        text-indent: 10px;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .scroll-tab {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    animation: hdnav2-show 0.3s;
    -webkit-animation: hdnav2-show 0.3s;
    -moz-animation: hdnav2-show 0.3s;
    -o-animation: hdnav2-show 0.3s;
    z-index: 10;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    .content {
      position: relative;
      margin-bottom: 0;
      .tab {
        display: flex;
        background: #f9f9f9;
        border: 1px solid #eee;
        border-bottom-color: #e1251b;
        border-top-color: #f9f9f9;
        border-right-color: #f9f9f9;
        .item {
          height: 40px;
          line-height: 40px;
          padding: 0 30px;
          font-size: 14px;
          -moz-transition: all 0.2s;
          -webkit-transition: all 0.2s;
          -o-transition: all 0.2s;
          transition: all 0.2s;
          cursor: pointer;
          margin-left: -1px;
          margin-top: -1px;
          &:hover {
            color: #e1251b;
          }
          .number {
            color: #e1251b;
            font-family: arial,sans-serif;
          }
        }
        .item.active {
          background: #e1251b;
          color: #fff;
          .number {
            color: #fff;
          }
        }
      }
      .shop-search {
        position: absolute;
        right: 120px;
        top: 6px;
        display: flex;
        .text {
          height: 26px;
          line-height: 26px;
          vertical-align: top;
          border: 1px solid #ddd;
          background: #fff;
          border-right: none;
          font-size: 12px;
          padding: 0 10px;
        }
        .btn {
          width: 30px;
          height: 28px;
          position: relative;
          background: #e1251b;
          &::before {
            position: absolute;
            left: 8px;
            top: 6px;
            display: block;
            width: 14px;
            height: 14px;
            content: ' ';
            font-size: 0;
            background: url(@/assets/images/icons.png) no-repeat;
            background-position: 0 -58px;
          }
          &:hover {
            opacity: 0.8;
          }
        }
      }
      .add-cart-btn {
        position: absolute;
        right: 15px;
        top: 6px;
        height: 28px;
        line-height: 28px;
        padding: 0 15px;
        background: #e1251b;
        color: #fff;
        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
  :deep(input) {
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }
  .disabled-gray {
    cursor: not-allowed !important;
    background-color: #f7f7f7 !important;
    color: #999 !important;
  }
  .buyer-comment {
    .text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      position: relative;
      line-height: 1.5;
      word-wrap: break-word;
      word-break: break-all;
      width: 816px;
    }
  }
  .btn-im {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px 3px 8px;
    overflow: hidden;
    background: url('@/assets/images/chat/sprite-im.png') no-repeat;
    vertical-align: middle;
  }
  .im-chat {
    &:hover {
      .btn-im {
        background: url('@/assets/images/chat/sprite-im-hover.png') no-repeat;
      }
    }
  }
  .shop-box {
    .im-chat {
      &:hover {
        color: #e1251b;
      }
    }
  }
  .params {
    display: flex;
    border-bottom: 1px dashed #DCDCDC;
    &:last-child {
      border: none;
    }
  }
}
